<template>
  <div>
    <el-button type="primary" @click="selectOrg" round>
      <el-icon>
        <Plus />
      </el-icon>
      选择抄送人
    </el-button>
    <div class="option">
      允许发起人添加抄送人:
      <el-switch v-model="allowAdd" />
    </div>
    <div style="margin-top: 20px">
      <el-tag
        class="org-item"
        :type="org.type === 'dept' ? '' : 'info'"
        v-for="(org, index) in select"
        :key="index + '_org'"
        closable
        size="small"
        @close="removeOrgItem(index)"
      >
        {{ org.name }}
      </el-tag>
    </div>
    <!--    TODO-->
    <!--    <orgPicker v-model="showOrgSelect" @close="closeSelect" :selected="select" @selectOver="selected"></orgPicker>-->
  </div>
</template>

<script setup name="CCNodeConfig" lang="ts">
import {Plus} from "@element-plus/icons-vue";
import {computed, ref} from "vue";

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    }
  }
})
//ref
const showOrgSelect = ref(false)

const config = ref(props.config)

const select = ref(props.config.assignedUser || [])

//computed
const allowAdd = computed(():boolean=>{
  return props.config.shouldAdd
})

//methods
const closeSelect = ():void => {
   showOrgSelect.value = false;
}

const selectOrg = ():void => {
   showOrgSelect.value = true;
}
const selected = (selected:any[]):void => {
  showOrgSelect.value = false;
  selected.forEach((item: any) => select.value.push(item));
}

const removeOrgItem= (index:number)=>{
  select.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.option {
  color: #606266;
  margin-top: 20px;
  font-size: small;
}

.desc {
  font-size: small;
  color: #8c8c8c;
}

.org-item {
  margin: 5px;
}
</style>
